<template>
    <div>
        <div class="jtbsm2-header jtbsm2-header-style-skr" id="jtbsm2-header">
            <div class="jtbsm2-header-wrap clearfix">
                <div class="jtbsm2-header-bd clearfix">
                    <h1 id="jtbsm2-header-logo" title="今天播什么-值得播TV-年轻人喜爱的互动直播平台">
                        <a href="http://jtbsm.live/" class="clickstat" eid="click/navi/logo" eid_desc="点击/导航/logo">
                            <img class="jtbsm2-hd-logo-0" src="../../../assets/images/logo-w.png" alt="今天播什么" width="58"
                                height="46.18">
                            <img class="jtbsm2-hd-logo-1" src="../../../assets/images/logo-w.png" alt="今天播什么" width="58"
                                height="46.18">
                        </a>
                    </h1>
                    <div class="jtbsm2-header-nav">
                        <div class="jtbsm2-nav-item" v-for="item in menuList" v-if="item.classNameID==-1"
                            v-bind:class="{ jtbsm2navitemon:item.pathName==currentPathName.split('/')[2] || currentParentPathName.split('/')[2]==item.pathName ||  (currentPathName.split('/')[2]=='home' && item.pathName=='index') }">
                            <div class="jtbsm2-nav-expand">
                                <a class="jtbsm2-nav-link jtbsm2-nav-link-ext clickstat" id="jtbsm2-nav-category"
                                    eid="click/navi/classification" eid_desc="点击/导航/分类" href="javascript:void(0)" @click="isActive(item.pathName,item.id)">
                                    <span>{{item.className}}</span>
                                    <i v-if="item.childMenuData.length>0"></i>
                                </a>
                                <div class="nav-expand-list nav-expand-game" v-if="item.childMenuData.length>0">
                                    <i class="arrow"></i>
                                    <dl class="clearfix">
                                        <dt>热门推荐</dt>
                                        <dd v-for="item2 in item.childMenuData"
                                            v-bind:class="{ active:item.pathName==currentPathName}">
                                            <a class="clickstat" eid="click/navi/game/game1" eid_desc="点击/导航/游戏/游戏1"
                                                :title="item2.className" href="javascript:void(0)"
                                                v-bind:class="{ active:item.pathName==currentPathName}"
                                                @click="childIsActive(item2.parentIndex,item2.id,item2.pathName)"
                                                >{{item2.className}}</a>
                                        </dd>

                                    </dl>
                                    <a href="javascript:void(0)" class="nav-expand-list-more clickstat" @click="isActive(item.pathName,item.id)"
                                        eid="click/navi/classification/more" >更多直播<i>&gt;</i>
                                    </a>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="jtbsm2-header-search clearfix" id="J_duyaHdSearch">
                            <a class="header-search clickstat" href="javascript:void(0)" eid="click/nav1/search"
                                eid_desc="点击/列表导航/搜索">
                                <!-- <el-input type="search" name="hsk"  v-model="searchMsg" ref="searchMsg" placeholder="搜游戏/直播/频道" autofocus="autofocus" autocomplete="off"
                                    maxlength="50" @keyup.enter.native="enterKey"></el-input>

                                    <span class="header-search-icon" @click="enterKey"></span> -->
                                <!-- <el-input placeholder="精彩直播内容/主播名称/标题" v-model="searchMsg" ref="searchMsg"  size="small" @keyup.enter.native="enterKey">
                                    <i slot="prefix" class="el-input__icon el-icon-search"></i>
                                </el-input> -->

                                <form @submit.prevent="formSubmit" action="javascript:return true">
                                    <input type="search" name="hsk" v-model="searchMsg" ref="searchMsg" placeholder="搜游戏/直播/频道" autofocus="autofocus" autocomplete="off"
                                    maxlength="50" @keydown="enterKey($event)">
                                    <span class="header-search-icon" @click="enterKey('search')"></span> 
                                </form>
                            </a>

                    </div>
                    <!-- <div class="jtbsm2-header-right" id="J_duyaHeaderRight">
                        <div class="jtbsm2-header-control clearfix">
                            <div class="jtbsm2-nav-right jtbsm2-nav-kaibo">
                                <a class="jtbsm2-nav-title clickstat" href="javascript:void(0)"
                                    eid="click/navi/kaibo" eid_desc="点击/导航/关注" target="_blank">
                                    <i class="jtbsm2-nav-icon jtbsm2-nav-video-icon"></i><br>
                                    <span class="title">关注</span>
                                </a>
                            </div>
                            <div class="jtbsm2-nav-right nav-user success-login">
                                <a class="nav-user-title" id="J_hd_nav_user" href="javascript:void(0)" target="_blank">
                                    <img id="login-userAvatar" src="..././../assets/images/logo-w.png" alt="头像">
                                    <span id="login-userName"></span>
                                </a>
                                <div class="nav-expand-list">
                                    <i class="arrow"></i>
                                    <div id="J_hyUserCard" class="jtbsm2-header-loading"></div>
                                </div>
                            </div>
                            <div id="J_global_user_tips"></div>
                        </div>
                    </div> -->
                </div>
            </div>
        </div>
    </div>
</template>


<script>

    import { menuData } from '../../../utils/menuConfig.js'
    import $ from 'jquery';
    export default {
        name: 'headers',
        data() {
            return {
                logolink: "",
                menuConfig: [],
                searchMsg: "",
                dialogVisible: false,
                isPC: false,
                menuList: menuData,
                childMenuList: [],
                isShowAuto: false,
                currentPathName: "",//当前选择的父或者子类
                currentParentPathName: "",//当前选择的父类
                currentChildPathName: ""//当前选择的子分类

            }
        },
        mounted() {
            window.addEventListener("scroll", this.handleScroll);//滚动监听

            this.currentPathName=this.$router.history.current.path;
            
           // this.getMenuList(this.currentPathName)

        },

        watch: {
            //切换路由监
            '$route'(toRouter, fromRouter) {
                
                this.currentPathName = toRouter.path;

                this.searchMsg = toRouter.query.searchMsg;

            }
        },
        methods: {
            isShowHeight() {
                this.isShowAuto = !this.isShowAuto
            },
            //一级菜单点击事件
            isActive(parentIndex, id, childMenuData) {
                this.currentParentPathName = parentIndex;
                if (this.currentPathName != parentIndex) {

                    if(parentIndex=='index'){
                        parentIndex = 'home';
                    }

                    this.currentPathName = parentIndex;
                    // console.log(this.$router.history.current.path.split('/')[2],parentIndex)
                    // if(this.$router.history.current.path.split('/')[2]==parentIndex){
                    //     this.$router.history.current.path=""
                    //     console.log(this.$router.history.current.path)
                    // }

                    this.$router.push({
                        path: parentIndex,
                    });
                }
                
                if (childMenuData) {
                    this.childMenuList = childMenuData
                }

            },
            //二级菜单点击事件
            childIsActive(parentIndex, id, currentChildPathName) {

                if (this.currentChildPathName != currentChildPathName) {
                    this.currentPathName = parentIndex;
                    this.currentChildPathName = currentChildPathName
                    
                    this.$router.push({
                        path: currentChildPathName,
                    });

                }

            },
		    formSubmit () {
		        return false
		      },
            //回车搜索
            enterKey(ev) {
                if (this.searchMsg == undefined || this.searchMsg === "") {
                    this.$nextTick(() => { //正确写法

                        this.$refs.searchMsg.focus();

                    })

                    return false;
                }
                if(ev.keyCode == 13 || ev=="search") {  //键盘回车的编码是13
                    this.$router.push({
                        path: 'search',
                        query: { searchMsg: this.searchMsg },
                    });
                }
            },
            //添加到桌面
            addHome() {
                this.dialogVisible = true
            },
            //获取菜单列表
            getMenuList(currentPathName) {
                // this.menuList = res.data.data;

                // for (let i = 0; i < this.menuList.length; i++) {
                //     if (currentPathName == this.menuList[i].pathName) {
                //         this.currentParentPathName = this.menuList[i].pathName
                //     }
                // }

                this.$axios.post('/api/projectApi/getCategory').then((res) => {
                    if (res.data.code == "0") {
                        this.menuList = res.data.data;

                        for (let i = 0; i < this.menuList.length; i++) {
                            if (currentPathName == this.menuList[i].pathName) {
                                this.currentParentPathName = this.menuList[i].pathName
                            }
                        }
                    }
                    else {
                        this.$message.error(res.data.message)
                    }
                }, (err) => {

                }).then(() => {

                }, (err) => {

                })
            },
            //获取当前子菜单
            getcurrentChildPathNameMenu(menuList, currentPathName, id) {
                var childMenuList1 = []
                for (let j = 0; j < menuList.length; j++) {
                    if (menuList[j].classNameID == id || menuList[j].pathName == currentPathName) {
                        childMenuList1.push({
                            OPID: menuList[j].OPID,
                            OPName: menuList[j].OPName,
                            className: menuList[j].className,
                            classNameID: menuList[j].classNameID,
                            createTime: menuList[j].createTime,
                            id: menuList[j].id,
                            pathName: menuList[j].pathName,
                            parentIndex: currentPathName
                        })
                    }
                }

                return childMenuList1;
            },
            //滚动事件的监听处理
            handleScroll() {

                var scr = document.documentElement.scrollTop || document.body.scrollTop; // 向上滚动的那一部分高度
                var clientHeight = document.documentElement.clientHeight; // 屏幕高度也就是当前设备静态下你所看到的视觉高度
                var scrHeight = document.documentElement.scrollHeight || document.body.scrollHeight; // 整个网页的实际高度，兼容Pc端

                if ((scr + clientHeight + 10) > 10) {
                    $(".jtbsm2-header.jtbsm2-header-style-skr").css({ position: "fixed", "background": "linear-gradient(177deg, rgb(255, 129, 45) 0%, rgb(224, 32, 32) 100%)" })

                }
                else {
                    $(".jtbsm2-header.jtbsm2-header-style-skr").css({ position: "absolute", "background": "none" })
                }

            },
        }
    }
</script>

<style>
    @media only screen and (min-width: 1px)    {
        .jtbsm2-header-bd {
            width: 1180px;
            min-width: 999px;
        }
    }
</style>